<template>
  <div id="cesiumContainer"></div>

  <div id="infoBox" style="display: flex; justify-content: space-around; font-size: 14px;">
  <p>鼠标经度: <span id="longitude">N/A</span></p>
  <p>鼠标纬度: <span id="latitude">N/A</span></p>
  <p>相机Heading: <span id="heading">N/A</span></p>
  <p>相机Pitch: <span id="pitch">N/A</span></p>
  <p>相机Roll: <span id="roll">N/A</span></p>
  <div>相机高度: <span id="cameraHeight">N/A</span></div>
  </div>

</template>

<script setup lang='ts'>
import * as Cesium from "cesium";
import { onMounted } from "vue";

import { CesiumViewer } from '../scripts/cesiumConfig.ts';
import { gdImageryLayer } from '../scripts/mapLoader.ts';

import { LoadGLBFromURL } from '../scripts/loadglb.ts';


let viewer:Cesium.Viewer;
let scene:Cesium.Scene;



onMounted(async () => {

// NOTE:Cesium离线运行

viewer = CesiumViewer("cesiumContainer");
// console.log("viewer:",viewer);
scene = viewer.scene;

const infoBox = document.getElementById('infoBox');
const longitudeSpan = document.getElementById('longitude');
const latitudeSpan = document.getElementById('latitude');
const headingSpan = document.getElementById('heading');
const pitchSpan = document.getElementById('pitch');
const rollSpan = document.getElementById('roll');
const heightSpan = document.getElementById('cameraHeight');

// 鼠标移动监听
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((movement) => {
  const cartesian = viewer.scene.pickPosition(movement.endPosition);
  if (cartesian) {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
      const latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);

      longitudeSpan.innerText = longitude;
      latitudeSpan.innerText = latitude;
  } else {
      longitudeSpan.innerText = 'N/A';
      latitudeSpan.innerText = 'N/A';
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

// 相机变化监听
viewer.scene.postRender.addEventListener(() => {
  const camera = viewer.camera;

  const heading = Cesium.Math.toDegrees(camera.heading).toFixed(2);
  const pitch = Cesium.Math.toDegrees(camera.pitch).toFixed(2);
  const roll = Cesium.Math.toDegrees(camera.roll).toFixed(2);

  headingSpan.innerText = heading;
  pitchSpan.innerText = pitch;
  rollSpan.innerText = roll;

  const cameraPosition = viewer.camera.positionCartographic;
  const cameraHeight = cameraPosition.height.toFixed(2); // 相机高度（米）
  // 在页面中显示相机高度
  heightSpan.innerText = cameraHeight;
  
});

// 加载高德地图
const gdImageryProvider = gdImageryLayer();
viewer.imageryLayers.addImageryProvider(gdImageryProvider);


// 设置相机视角位置
const cameraLon = 113.955282;
const cameraLat = 30.206550;
const cameraHeight = 135000.0;
const cameraPosition = Cesium.Cartesian3.fromDegrees(cameraLon, cameraLat, cameraHeight);

// 设置相机视图
viewer.camera.setView({
  destination: cameraPosition,
  orientation: {
      heading: Cesium.Math.toRadians(345),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0
  }
});


// 在此处添加你自己的代码内容

// const glbURL = 'http://127.0.0.1:8080/lake_mesh_with_color.glb';

const glbURL = 'http://127.0.0.1:8080/HYD_2023_12_1_0_0_0.glb';
// TODO:调整Cesium上加载glb模型的位置
let model = await LoadGLBFromURL(glbURL,viewer,cameraLon,cameraLat);

// 加载河流模型无误
// const riverGlbURL = 'http://127.0.0.1:8081/HYD_2023_12_1_0_0_0.glb';
// let riverModel = await LoadGLBFromURL(riverGlbURL,viewer);

// 无法直接设置相机飞行到模型的位置
// viewer.flyTo(riverModel);








});

</script>

<style scoped>
#cesiumContainer{ 
  width: 100%;
  height: 100vh; 
  padding: 0;
  margin: 0;
  overflow:
  hidden;
}
#infoBox{
  position: fixed; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  background: rgba(42, 42, 42, 0.8); 
  color: white; 
  padding: 10px; 
  border-top: 2px solid #fff; 
  font-family: Arial, sans-serif; 
  z-index: 1000; 
  box-sizing: border-box;
}
</style>
